<template>
  <view class="container">
  <view class="goods-list">
    <view class="goods-item" v-for="(item, index) in goodsList" :key="index" @click="goDetail(item)">
      <!-- 商品图片 -->
      <image class="goods-img" v-if="item.packageCoverImage" :src="item.packageCoverImage" mode="aspectFill"></image>
       <image class="goods-img" v-else src="/static/img/icon_haibao.png" mode="aspectFill"></image>
      
      <!-- 商品信息 -->
      <view class="goods-info">
        <!-- 第一行：商品名称 -->
        <view class="goods-name">{{item.name}}</view>
        
        <!-- 第二行：分享标签和距离 -->
        <view class="row-second" v-if="item.share==1">
          <view class="share-tag">分享得金币</view>
        <!--  <text class="distance" v-if="item.mapVos.length>0">{{item.mapVos[0].distanceStr}}</text> -->
        </view>
        <view class="threeROw">
        	<!-- 第三行：价格信息 -->
        	<view class="price-section">
        	  <view class="price-left">
        	    <text class="sale-price">¥{{item.newPrice}}</text>
        	    <text class="market-price">¥{{item.originalPrice}}</text>
        	  </view>
        	 <view class="price-right">
        	    <text class="views">{{item.browseNum}}人浏览</text>
        	    <text class="bargain-count">{{item.bargainNum}}人砍价</text>
        	  </view> 
        	</view>
        	
        	<!-- 砍价按钮 -->
        	<view class="bargain-btn" v-if="item.currentStock>0" >抢购</view>
			<view class="bargain-btn2" v-else >售罄</view>
  		
        </view>
       
      </view>
    </view>
  </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
       goodsList: [],
	   location: {
	   	cityName: '',
	   	cityCode: '',
	   	lng: '',
	   	lat: '',
	   },
	    page:1,
		userInfo:'',
    }
  },
 onLoad() {
	this.location= uni.getStorageSync("location")
	this.userInfo=uni.getStorageSync("userInfo")
    this.getList()
 },
 onShow() {
 	
 },
 methods: {
  goDetail(item){
  	 uni.navigateTo({
  	 	url:'../index/goodsDetail?id='+item.id
  	 })  
  },
  getList(){
 	 uni.showLoading({
 	 	title: '加载中'
 	 })
 	 this.$http('jeecg-boot/api/wx/collect/qyeryPage',{
 	 		   pageNo:this.page,
 	 		   pageSize:10,
 	 		  /* startLng:this.location.lng,
 	 		   startLat:this.location.lat,
 	 		   userId:this.userInfo.id,
 	 		   type:1 */
 	 },'POST').then(res => {
 	 		   //console.log(res)
 	 	     uni.hideLoading();
 	 		 var goodsList=res.result.records
 	 		/* goodsList.forEach(item=>{
 	 			 if(item.mapVos){
 	 				 item.mapVos.sort((a, b) => a.distance - b.distance);
 	 			 }
 	 			 
 	 		 }) */
			 goodsList.forEach(item=>{
			  	 			
			 			 var newPrice=item.currentPrice+item.admJianNum
			 			 item.newPrice=newPrice.toFixed(2)
			  	 			 
			 })
 	 		 this.goodsList=[...this.goodsList, ...goodsList]
 	 	 //this.goodsList2=res.result.records
 	  })
  }
 }
}
</script>

<style scoped lang="less">
.container{
	min-height: 100vh;
	 background: #f4f4f4;
}
/* 商品列表样式 */
.goods-list {
  padding: 20rpx;
  .goods-item {
    display: flex;
    background-color: #fff;
    border-radius: 12rpx;
    overflow: hidden;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  }
  
  .goods-img {
    width: 240rpx;
    height: 240rpx;
    flex-shrink: 0;
  }
  
  .goods-info {
    flex: 1;
    padding: 20rpx;
    display: flex;
    flex-direction: column;
  }
  
  .goods-name {
    font-size: 30rpx;
    color: #333;
    font-weight: bold;
    margin-bottom: 15rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  
  .row-second {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15rpx;
  }
  
  .share-tag {
    font-size: 22rpx;
    color: #EC0F0A;
    border: 1rpx solid #EC0F0A;
    border-radius: 20rpx;
    padding: 4rpx 12rpx;
  }
  
  .distance {
    font-size: 24rpx;
    color: #999;
  }
  
  .price-section {
   /* display: flex;
    justify-content: space-between;
    margin-top: auto; */
  }
  .threeROw{
  	display: flex;
  	 justify-content: space-between;
  }
  .price-left {
    display: flex;
    align-items: baseline;
  }
  
  .sale-price {
    font-size: 36rpx;
    color: #EC0F0A;
    font-weight: bold;
    margin-right: 10rpx;
  }
  
  .market-price {
    font-size: 24rpx;
    color: #999;
    text-decoration: line-through;
  }
  
  .price-right {
   /* display: flex;
    flex-direction: column;
    align-items: flex-end; */
  }
  
  .views, .bargain-count {
    font-size: 22rpx;
    color: #999;
  }
  
  .bargain-btn {
    align-self: flex-end;
    margin-top: 10rpx;
    background: linear-gradient(to right, #FF5F5F, #EC0F0A);
    color: #fff;
    font-size: 26rpx;
    padding: 8rpx 30rpx;
    border-radius: 30rpx;
    box-shadow: 0 4rpx 10rpx rgba(236, 15, 10, 0.3);
  }
  .bargain-btn2{
  	  align-self: flex-end;
  	  margin-top: 10rpx;
  	  background: #999;
  	  color: #fff;
  	  font-size: 26rpx;
  	  padding: 8rpx 30rpx;
  	  border-radius: 30rpx;
  	  box-shadow: 0 4rpx 10rpx rgba(236, 15, 10, 0.3);
  }
}
</style>